<template>
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in goodDetail.s_goods_photos" :key="image">
      <img :src="image.path" class="banner" />
    </van-swipe-item>
  </van-swipe>
  <!-- 详情 -->
  <!-- 价格  -->
  <div
    style="
      display: flex;
      justify-content: space-between;
      padding: 2vw 2vw 0 2vw;
    "
  >
    <div style="display: flex">
      <h4 style="color: #ff512f">￥</h4>
      <span style="color: #ff512f">{{ goods.price }}</span>
      <h3 v-if="goods.sale_price !== null">优惠价</h3>
      <h4>{{ goods.sale_price }}</h4>
    </div>
    <div>
      <span>28888付款</span>
    </div>
  </div>
  <!-- 简介 -->
  <van-text-ellipsis :content="goods.desc" style="padding: 2vw 0 0 2vw" />
  <!-- 保障 -->
  <div style="padding: 2vw 0 0 2vw">
    <span style="font-weight: 400">保障: </span>
    <span style="font-weight: 700">假一赔十、极速退款、7天无理由退货</span>
  </div>
  <!-- 规格 -->
  <van-cell is-link title="选择规格" @click="show = true" />
  <van-action-sheet v-model:show="show" title="标题" @open="open">
    <div class="content"></div>
  </van-action-sheet>

  <!-- 评价 -->
  <div style="padding: 2vw 0 0 2vw">
    <div style="display: flex; justify-content: space-between">
      <span>评价(52)</span>
      <span style="color: gray">好评97% &gt;</span>
    </div>
    <div
      style="display: flex; justify-content: space-evenly; padding: 2vw 0 0 0"
    >
      <div class="appraise">续航给力</div>
      <div class="appraise">性价比高</div>
      <div class="appraise">运行速度</div>
      <div class="appraise">显示效果</div>
    </div>
    <div>
      <div style="display: flex; padding-top: 3vw">
        <div style="padding-top: 2vw">
          <van-image
            round
            width="10vw"
            height="6vh"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </div>
        <div style="padding-left: 1vw">
          <div style="padding-top: 2vw">
            <span>守护世界上最好的坤坤</span>
          </div>
          <div style="margin-bottom: 2vh">
            <span>
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
            </span>
          </div>
        </div>
      </div>

      <div style="padding-left: 2vw; padding-right: 4vw">
        <div class="van-multi-ellipsis--l3">
          发布后第一时间订购，京东送货快。机器做工非常精致，配置好，手握着橙色后盖和曲屏显得很高端。手机运行速度快，大屏看起来不伤眼。待机时间长，重度玩一天也不用充电。总体来说是一台令人满意的手机。
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding-top: 2vw;
          "
        >
          <van-image
            width="100"
            height="100"
            src="../../../assets/6b68d20b230574a5.jpg!q70.dpg.webp"
          />
          <van-image
            width="100"
            height="100"
            src="../../../assets/89bd951253ab94c9.jpg!q70.dpg.webp"
          />

          <van-image
            width="100"
            height="100"
            src="../../../assets/97272efe1fbb7af3.jpg!q70.dpg.webp"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 评价*2 -->
  <div style="padding: 2vw 0 0 2vw">
    <div>
      <div style="display: flex; padding-top: 3vw">
        <div style="padding-top: 2vw">
          <van-image
            round
            width="10vw"
            height="6vh"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </div>
        <div style="padding-left: 1vw">
          <div style="padding-top: 2vw">
            <span>守护世界上最好的超煌</span>
          </div>
          <div style="margin-bottom: 2vh">
            <span>
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
            </span>
          </div>
        </div>
      </div>

      <div style="padding-left: 2vw; padding-right: 4vw">
        <div class="van-multi-ellipsis--l3">
          发布后第一时间订购，京东送货快。机器做工非常精致，配置好，手握着橙色后盖和曲屏显得很高端。手机运行速度快，大屏看起来不伤眼。待机时间长，重度玩一天也不用充电。总体来说是一台令人满意的手机。
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding-top: 2vw;
          "
        >
          <van-image
            width="100"
            height="100"
            src="../../../assets/6b68d20b230574a5.jpg!q70.dpg.webp"
          />
          <van-image
            width="100"
            height="100"
            src="../../../assets/89bd951253ab94c9.jpg!q70.dpg.webp"
          />

          <van-image
            width="100"
            height="100"
            src="../../../assets/97272efe1fbb7af3.jpg!q70.dpg.webp"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 评价*3 -->
  <div style="padding: 2vw 0 0 2vw">
    <div>
      <div style="display: flex; padding-top: 3vw">
        <div style="padding-top: 2vw">
          <van-image
            round
            width="10vw"
            height="6vh"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </div>
        <div style="padding-left: 1vw">
          <div style="padding-top: 2vw">
            <span>守护世界上最好的烨哥</span>
          </div>
          <div style="margin-bottom: 2vh">
            <span>
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
              <van-icon name="like" style="color: red; padding: 1vw" />
            </span>
          </div>
        </div>
      </div>

      <div style="padding-left: 2vw; padding-right: 4vw">
        <div class="van-multi-ellipsis--l3">
          发布后第一时间订购，京东送货快。机器做工非常精致，配置好，手握着橙色后盖和曲屏显得很高端。手机运行速度快，大屏看起来不伤眼。待机时间长，重度玩一天也不用充电。总体来说是一台令人满意的手机。
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding-top: 2vw;
          "
        >
          <van-image
            width="100"
            height="100"
            src="../../../assets/6b68d20b230574a5.jpg!q70.dpg.webp"
          />
          <van-image
            width="100"
            height="100"
            src="../../../assets/89bd951253ab94c9.jpg!q70.dpg.webp"
          />

          <van-image
            width="100"
            height="100"
            src="../../../assets/97272efe1fbb7af3.jpg!q70.dpg.webp"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 备注图片 -->
  <div v-html="goodDetail.rich_text"></div>
  <!-- 操作 -->
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
    <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
    <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
    <van-action-bar-button
      type="danger"
      color="linear-gradient(79deg, #FF512F 0%,#F09819 100%)"
      text="加入购物车"
      @click="addCart"
    />
    <van-action-bar-button
      type="danger"
      text="立即购买"
      @click="onClickButton"
    />
  </van-action-bar>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import useGoodStore from '../../stores/good.js';
import { getGoodDetailApi, getGoodSpecApi } from '../../service/index.js';
import { createCart } from '@/service';
import { ref } from 'vue';
const goods = ref({});
const goodStore = useGoodStore();
const route = useRoute();
const getGood = () => {
  const res = goodStore.getGoodDetail(19);
  res.then((r) => {
    goods.value = r.result;
    console.log('goods.value', goods.value);
  });
  // console.log('没有看到', res);
};
getGood();
goodStore.getGoodDetail(route.params.id);
const { goodDetail } = storeToRefs(goodStore);

// 规格
const show = ref(false);
const actions = [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }];
const open = async () => {
  console.log(goods.value.id);
  const getspec = await getGoodSpecApi({ project_id: goods.value.id });

  console.log('guige', getspec);
};
const addCart = async () => {
  const res = await createCart({ goods_id: goods.value.id, num: 1 });
  console.log(res);
};
const onClickButton = () => showToast('点击按钮');
</script>

<style lang="scss" scoped>
.banner {
  width: 100vw;
  height: auto;
}
.appraise {
  width: 20vw;
  height: 3vh;
  padding: 1vw;
  border-radius: 50vw;
  text-align: center;
  justify-content: space-evenly;
  background-color: #a32626;
  color: #fff;
}
.content {
  padding: 16px 16px 160px;
}
</style>
